<script setup>
import { ref, reactive, toRef, toRefs, shallowReactive, shallowRef, readonly, shallowReadonly, toRaw, markRaw } from 'vue'
// shallowReactive 浅层的 响应式
// let person = shallowReactive({
let person = reactive({
    name: '德玛西亚',
    age: 18,
    job: {
        j1: {
            salary: 10
        }
    }
})

// shallowRef 不处理对象的响应式    ref可以，因为ref会把对象自动装换为porxy
const n = shallowRef(0)
const o = ref({
    a: 10
})

const name = toRef(person, 'name')
console.log(name)

const x = toRefs(person)
console.log(x)

function showPrwPerson() {
    // toRaw 打印原始的数据，也就是没有被 reactive 处理过的，  注意只有 reactive 处理的才可以转回来 ref 的不能
    const p = toRaw(person)
    p.age++
    console.log(p)
}

function addCar() {
    let car = { name: '奥迪', price: '30W' }
    // markRaw 指定的值为不可改的
    person.car = markRaw(car)
}


let obj = reactive({
    name: '唐三',
    age: 16,
    job: {
        j1: {
            salary: 10
        }
    }
})
// readonly 全部保护
obj = readonly(obj)

// shallowReadonly 对象浅层次的保护
// obj = shallowReadonly(obj)

</script>

<template>
    <h1>当前n的值为：{{ n }}</h1>
    <button @click="n++">n++</button>
    <hr />
    <h1>{{ person }}</h1>
    <h1>姓名：{{ name }}</h1>
    <h1>年龄：{{ person.age }}</h1>
    <h1>薪资：{{ person.job.j1.salary }}k</h1>
    <h1 v-if="person.car">座驾信息：{{ person.car }}</h1>

    <button @click="name += '@'">修改姓名</button>
    <button @click="person.age++">修改年龄</button>
    <button @click="person.job.j1.salary++">修改薪资</button>

    <button @click="showPrwPerson">输出最原始的person</button>
    <button v-if="!person.car" @click="addCar">给person添加一台车</button>

    <button v-if="person.car" @click="person.car.name += '!'">换车名</button>
    <button v-if="person.car" @click="person.car.name += '!'">换价格</button>

    <hr />
    <h1>{{ obj }}</h1>
    <h1>姓名：{{ obj.name }}</h1>
    <h1>年龄：{{ obj.age }}</h1>
    <h1>薪资：{{ obj.job.j1.salary }}k</h1>

    <button @click="obj.name += '@'">修改姓名</button>
    <button @click="obj.age++">修改年龄</button>
    <button @click="obj.job.j1.salary++">修改薪资</button>

    <h1></h1>
</template>
